<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery-3.5.1.min.js"></script>
    <title>Document</title>
    <script>
        // 两种方式是一样的 这个ready()是为了让浏览器创造html再调用script

        // $().ready(function () {

        //     $("#pay").click(function () {
        //         // 怎么去设置按钮的禁止属性attribute(attr),两个参数：属性名和属性值
        //         //jQuery中disabled是Boolean，true禁止，false不禁止
        //         $("#pay").attr("disabled", true);
        //         // 改变文字 this代表当前对象按钮，jquery语法特殊写 $(this)
        //         $("#pay").text($(this).text() + ",已经支付，请稍后。。。。");
        //     })
        // })
        $(function () {
            $("#pay").click(function () {
                // 怎么去设置按钮的禁止属性attribute(attr),两个参数：属性名和属性值
                //jQuery中disabled是Boolean，true禁止，false不禁止
                $("#pay").attr("disabled", true);
                // 改变文字 this代表当前对象按钮，jquery语法特殊写 $(this)
                $("#pay").text($(this).text() + ",已经支付，请稍后。。。。");
            })
        })
    </script>
</head>

<body>
    <h1>
        按钮点击后，被禁止，无法再次点击
    </h1>
    <!-- disabled属性，它就是不允许点击 disabled="disabled" -->
    <button id="pay">支付宝支付</button>
    <button>微信支付</button>
</body>

</html>